<template>
    <!-- <div id="chart-container" ref="chartContainer"></div> -->
    <el-row class="list-box" :gutter="16">
        <el-col :span="6">
            <div class="order-box">
                <div class="order-text-box">
                    <p class="order-num">56</p>
                    <p class="order-num-text">今日支付订单数</p>
                    <p class="order-add">较昨日+ 20%</p>
                </div>
                <div class="order-icon-box">
                    <el-icon>
                        <List />
                    </el-icon>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="pay-box">
                <div class="order-text-box">
                    <p class="order-num">55</p>
                    <p class="order-num-text">今日支付人数</p>
                    <p class="order-add">较昨日+ 20%</p>
                </div>
                <div class="order-icon-box">
                    <el-icon>
                        <Coin />
                    </el-icon>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="price-box">
                <div class="order-text-box">
                    <p class="order-num">56</p>
                    <p class="order-num-text">今日支付金额（元）</p>
                    <p class="order-add">较昨日+ 20%</p>
                </div>
                <div class="order-icon-box">
                    <el-icon>
                        <Box />
                    </el-icon>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="person-box">
                <div class="order-text-box">
                    <p class="order-num">56</p>
                    <p class="order-num-text">今日支付订单数</p>
                    <p class="order-add">较昨日+ 20%</p>
                </div>
                <div class="order-icon-box">
                    <el-icon>
                        <Coordinate />
                    </el-icon>
                </div>
            </div>
        </el-col>
    </el-row>

    <el-row class="home" :gutter="16">
        <el-col :span="8" style="margin-top: 20px;">
            <el-card shadow="hover">
                <div class="user-box">
                    <img src="../../assets/user.jpg" alt="">
                    <div class="name-box">
                        <p class="name">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>登录时间：<span>2024/12/03</span></p>
                    <p>登录地点：<span>广州白云</span></p>
                </div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <common-chart chart-type="bar" :options="barOptions">

            </common-chart>
        </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row class="table-box" :gutter="16">
        <el-col :span="24">
            <el-card shadow="hover">

                <el-table :data="tableData" style="width: 100%">
                    <el-table-column v-for="(val,key) in tableLable" :key="key" :prop="key" :label="val"/>
                </el-table>

            </el-card>
        </el-col>
    </el-row>

</template>


<script setup>
import CommonChart from '../../components/CommonChart.vue';
import { getCurrentInstance, onMounted, ref } from 'vue';

// 
const {proxy} =getCurrentInstance()

// echarts表格
const barOptions = {
    title: {
        text: '本月销量',
        textStyle: {
            fontSize: 12
        }
    },
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [1200, 2000, 1500, 800, 700, 1100, 1300],
            type: 'bar'
        }
    ]
}
// 表格的每一项
const tableLable={
    name:'商品',
    todayBuy:'今日购买',
    monthBuy:'本月购买',
    totalBuy:'总购买'
}
// 表格数据
let tableData= ref([])
console.log(tableData);

//请求表格数据
const getTableList = async ()=>{
    let res = await proxy.$api.getTableData()
    tableData.value=res.tableData
}


onMounted(()=>{
    getTableList()
})


</script>
<style lang="less">
#chart-container {
    width: 500px;
    height: 500px;
}

.list-box {
    background-color: #FFFFFF;
    padding: 10px 0;
}

.home {
    margin-top: 10px;
    background-color: #FFFFFF;
    padding: 10px 0;

    .user-box {
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 20px;

        }
    }

    .login-info {
        p {
            line-height: 30px;
            font-size: 14px;
            color: #999;

            span {
                color: #666;
                margin-left: 20px;
            }
        }
    }
}

.order-box {
    display: flex;
    height: 160px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: rgb(37, 97, 239);
    border-radius: 15px;
    font-size: 30px;
    color: #FFFFFF;

    .order-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: rgb(37, 97, 239);
        background-color: #FFFFFF;
        text-align: center;
        line-height: 57px;
    }


    .order-num {
        font-weight: 700;
        font-size: 44px;
        margin-bottom: 20px
    }

    .order-num-text {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px
    }

    .order-add {
        font-size: 12px;

    }

}

.pay-box {
    display: flex;
    height: 160px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: rgba(255, 98, 98, 1);
    border-radius: 15px;
    font-size: 30px;
    color: #FFFFFF;

    .order-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: rgba(255, 98, 98, 1);
        background-color: #FFFFFF;
        text-align: center;
        line-height: 57px;
    }


    .order-num {
        font-weight: 700;
        font-size: 44px;
        margin-bottom: 20px
    }

    .order-num-text {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px
    }

    .order-add {
        font-size: 12px;

    }
}

.price-box {
    display: flex;
    height: 160px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: rgba(40, 208, 148, 1);
    border-radius: 15px;
    font-size: 30px;
    color: #FFFFFF;

    .order-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: rgba(40, 208, 148, 1);
        background-color: #FFFFFF;
        text-align: center;
        line-height: 57px;
    }


    .order-num {
        font-weight: 700;
        font-size: 44px;
        margin-bottom: 20px
    }

    .order-num-text {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px
    }

    .order-add {
        font-size: 12px;

    }
}

.person-box {
    display: flex;
    height: 160px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: rgba(255, 199, 28, 1);
    border-radius: 15px;
    font-size: 30px;
    color: #FFFFFF;

    .order-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: rgba(255, 199, 28, 1);
        background-color: #FFFFFF;
        text-align: center;
        line-height: 57px;
    }


    .order-num {
        font-weight: 700;
        font-size: 44px;
        margin-bottom: 20px
    }

    .order-num-text {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px
    }

    .order-add {
        font-size: 12px;

    }
}
.table-box{
    margin-top: 7px;
    background-color: #FFFFFF;
    padding: 7px 0;
}
</style>